<template>
  <el-dialog
    title="编辑车辆资料"
    :visible.sync="dialogVisible"
    width="750px"
    class="check-message"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="24" class="description"
              >编辑车牌号会自动匹配相关联车辆信息</el-col
            >
            <el-col :span="12">
              <el-form-item label="车牌号">
                <el-input
                  v-model="form.code"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="SIM卡号">
                <el-input
                  v-model="form.sim"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备类型">
                <el-select v-model="form.type" size="small">
                  <el-option label="WX11-W" value="WX11-W"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备号">
                <el-input
                  v-model="form.number"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属车组">
                <el-select v-model="form.belong" size="small">
                  <el-option label="至尊宝888-W" value="至尊宝888"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车架号">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发动机号">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车型">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="ICCID">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="IMEI">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="服务密码">
                <el-input
                  v-model="form.password"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="激活时间">
                <el-input
                  v-model="form.time"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安装时间">
                <el-input
                  v-model="form.installTime"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车主">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="状态">
                <el-radio v-model="form.status" label="1">未结清</el-radio>
                <el-radio v-model="form.status" label="2">已结清</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder=""
                  v-model="form.note"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图标">
                <ul class="icon-list">
                  <li><i class="el-icon-bicycle"></i></li>
                  <li><i class="el-icon-truck"></i></li>
                  <li><i class="el-icon-ship"></i></li>
                </ul>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="车主信息" name="second">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="证件号">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系方式">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车主地址">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="安装信息" name="third">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="安装人员">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安装地点">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="安装备注">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder=""
                  v-model="form.name"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="风控设置" name="fourth"
        ><el-form ref="form" :model="form" label-width="120px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="绑定出省报警">
                <el-select
                  v-model="form.name"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="WX11-W" value="WX11-W"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="经常停留点设置">
                <ul>
                  <li>家庭住址：<span style="color: #409EFF;">未设置</span></li>
                  <li>公司地址：<span style="color: #409EFF;">未设置</span></li>
                </ul>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="启用二押点报警">
                <el-radio v-model="form.start" label="1">启用</el-radio>
                <el-radio v-model="form.start" label="2">关闭</el-radio>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <ul class="attention-des">
                <li>
                  <span>二押点： </span
                  ><span>防止车辆在二手抵押点停留，增加风险预防。</span>
                </li>
                <li>
                  <span>绑定省市：</span>
                  <span
                    >绑定省市区域后，该车辆驶出所绑定的区域，触发超出区域报警。</span
                  >
                </li>
                <li>
                  <span>设置经常停留：</span>
                  <span
                    >当车辆连续三天不经过您设置的两点(范围：1000米)，系统会自动推送车辆异常停留报警。</span
                  >
                </li>
                <li>
                  <span>注意事项：</span>
                  <span>风控设置只对指定本设备有效</span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-form></el-tab-pane
      >
      <el-tab-pane label="保险信息" name="five"
        ><el-form ref="form" :model="form" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否首保">
                <el-select
                  v-model="form.name"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="WX11-W" value="WX11-W"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登记日期">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保险公司">
                <el-select
                  v-model="form.name"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="WX11-W" value="WX11-W"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="提醒日期设置">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="险种明细">
                <el-select
                  v-model="form.name"
                  size="small"
                  placeholder="请选择"
                >
                  <el-option label="WX11-W" value="WX11-W"></el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="总金额">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ><template slot="append">元</template></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder=""
                  v-model="form.name"
                >
              </el-input
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form></el-tab-pane
      >
      <el-tab-pane label="保养信息" name="six"><el-form ref="form" :model="form" label-width="120px">
          <el-row>
            <el-col :span="12" class="set_height">
              <el-form-item label="当前里程">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ><template slot="append">公里</template></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" class="set_height">
              <el-form-item label="上次保养里程">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ><template slot="append">KM</template></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" class="set_height">
              <el-form-item label="上次保养时间">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ></el-input>
              </el-form-item>
            </el-col>

             <el-col :span="12" class="set_height">
              <el-form-item label="提前提醒">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ><template slot="append">天</template></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" class="set_height">
              <el-form-item label="提前提醒">
                <el-input
                  v-model="form.name"
                  placeholder=""
                  size="mini"
                ><template slot="append">KM</template></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder=""
                  v-model="form.note1"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form></el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer" style="text-align: center;">
      <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
      <el-button type="primary" @click="dialogVisible = false" size="mini"
        >保存</el-button
      >
      <el-button @click="dialogVisible = false" size="mini">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
let lists = ["停车超长", "拆除报警", "风险监控", "故障状况", "误报", "其他"];

export default {
  data() {
    return {
      dialogVisible: false,
      activeName: "first",
      form: {
        code: "14020843471",
        sim: "1440245807887",
        type: "WX11-W",
        number: "14020843471",
        belong: "至尊宝888",
        password: "000000",
        time: "2021-01-22 22:18:51",
        installTime: "2021-01-22 22:18:04",
        status: "1",
        note: "BJ",
        start: "2"
      }
    };
  },

  methods: {
    show() {
      this.dialogVisible = !this.dialogVisible;
      this.value = "";
    }
  }
};
</script>

<style lang="scss">
.check-message {
  .el-dialog__header {
    background-color: #479de6 !important;

    .el-dialog__title,
    .el-dialog__close {
      color: #fff;
    }
  }

  .el-dialog__body {
    padding: 20px;
  }

  .el-dialog__footer {
    text-align: center;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .description {
    background: #e0efff;
    color: #58a5f1;
    text-align: center;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px;
  }

  .icon-list {
    li {
      display: inline-block;
      font-size: 20px;
      margin-right: 15px;
      font-weight: bold;
      cursor: pointer;
    }
  }

  .attention-des {
    background-color: rgb(234, 249, 255);
    padding: 8px 13px;
    border: 1px solid rgb(177, 196, 234);

    li {
      display: flex;
      height: 30px;
      line-height: 30px;
      color: red;

      > span:first-child {
        flex: 0 0 120px;
        text-align: right;
      }
    }
  }

  .set_height {
    height: 42px;
  }
}
</style>
